// 数据驱动: 如何将dom操作转化为对数据的操作
Vue.component("todolist",{
    props:["list"],
    template:`
            <div>
                <input type="text" placeholder="请输入待办任务"
                        v-model="todoItem" v-on:change="changeFn">
                <ul>
                    <li v-for="item in list">
                    {{item}}
                    </li>
                </ul>
                <v-lalala></v-lalala>
            </div>
        `,
    data(){
        return {
            todoItem:""
        }
    },
    methods:{
        changeFn(){
            this.list.push(this.todoItem)
            this.todoItem=""
        }
    },
    components:{
        "v-lalala":{
            template:"<span>啦啦啦</span>"
        }
    }
})

